<template>
    <h1>v-for的更新操作</h1>
    <ul>
        <li v-for="(item,index) in arr" :key="index">
            {{ item }}
        </li>
    </ul>
    <button @click="revbtn">数组翻转</button>
    <button @click="sliceBtn">数组截取</button>
    <button @click="uploadBtn">数组更新</button>
    <button @click="filterbtn">数组过滤</button>
    <hr>
    <!--搜索-->
    <div>
        <input type="text" v-model="search">
        <ul>
            <li v-for="item in searchFn()" :key="item">
                {{ item }}
            </li>
        </ul>
    </div>


</template>

<script setup>
import { ref } from 'vue'
const arr = ref([1, 2, 3, 4, 5, 6])
const arr2 = ref([7,8,9,10])

const revbtn = () => { 
    //数组翻转 可以直接更新
    arr.value.reverse()
}
const sliceBtn = () => { 
    //数组截取 不能直接对数组更新 需要重新赋值

    console.log(arr.value.slice(0, 3));
    arr.value = arr.value.slice(0, 3)
}
const uploadBtn = () => { 
    //数组更新 直接赋值可以造成数组更新，如果采用拼接的模式不会进行数组更新了
    // arr.value[5]=7
    console.log(arr.value.concat([7, 8]));
    const newarr = arr.value.concat(arr2.value)
    console.log(newarr);
   arr.value = newarr
   
}
const filterbtn = () => { 
   let arrfile= arr.value.filter((item) => { 
        return item <5 
   })
    console.log(arrfile);
   /**
    * 三个参数： value 当前数组的值 
    * index 当前数组的索引
    * arr 当前数组本身
    */
  let arrfil=  arr.value.filter(function (value, index, arr) { 
        console.log(index);
        
        return value < 5
     })
    console.log(arrfil);
    // 只有一个的话
    arr.value = arr.value.filter((item) => item < 5)
    
}
//搜索框
const search = ref('')
const strarr = ref(["aaa", "bbb", "ccc", "aab", "abc", "aca", "bbc", "bbd", "bbe"])

const searchFn = () => { 
    // 过滤出包含搜索关键词的数组元素
    let searchVal = strarr.value.filter(item => item.includes(search.value.trim()))
    // 打印过滤后的数组
     console.log(searchVal);
    // 返回过滤后的数组
    return searchVal
    
}
</script>

<style lang="scss" scoped>

</style>